<template>
  <div
    v-loading="pageLoading"
    element-loading-text="加载中..."
    class="pan-share-content"
  >
    <div class="pan-share-header-content">
      <div class="pan-share-header-content-wrapper">
        <div class="pan-share-header-title-font-content">
          <span
            class="pan-share-header-title-font"
            style="color: #2c2c2c"
            @click="goHome"
            >易云盘</span
          >
        </div>
        <div v-if="loginFlag" class="pan-share-header-user-info-content">
          <el-link :underline="false" type="success" class="pan-share-username">
            欢迎您,{{ username }}
          </el-link>
          <el-link
            :underline="false"
            type="success"
            class="pan-share-exit-button"
            @click="exit"
          >
            退出
          </el-link>
        </div>
        <div v-if="!loginFlag" class="pan-share-header-button-content">
          <el-link
            :underline="false"
            type="primary"
            class="pan-share-login-button"
            @click="login"
          >
            登录
          </el-link>
          <el-link
            :underline="false"
            type="primary"
            class="pan-share-register-button"
            href="/register"
            target="_blank"
          >
            注册
          </el-link>
        </div>
      </div>
    </div>
    <div class="pan-share-list-content">
      <div class="pan-share-list-wrapper">
        <el-card shadow="always" class="pan-share-list-card">
          <div
            v-if="!shareCancelFlag"
            slot="header"
            class="pan-share-list-card-header"
          >
            <div class="pan-share-list-card-header-share-info-content">
              <span class="pan-share-list-card-header-share-info">{{
                shareCodeHeader
              }}</span>
              <div class="pan-share-list-card-header-time">
                <span class="pan-share-list-card-header-create-date"
                  ><i class="el-icon-time" />分享时间：{{ shareDate }}</span
                >
                <span class="pan-share-list-card-header-expire-date"
                  ><i class="el-icon-time" />失效时间：{{
                    shareExpireDate
                  }}</span
                >
              </div>
            </div>
            <div class="pan-share-list-card-button-group">
              <el-button
                type="success"
                size="medium"
                @click="saveFiles(undefined)"
                ><i class="el-icon-document-copy el-icon--right" />
                保存到我的易云盘</el-button
              >
              <el-button type="info" size="medium" @click="downloadFile"
                >下载<i class="el-icon-download el-icon--right"
              /></el-button>
            </div>
          </div>
          <div v-if="shareCancelFlag" class="pan-share-list-card-error-message">
            <span>Sorry,您来晚啦~ 该分享已到期或已失效~</span>
          </div>
          <div
            v-if="!shareCancelFlag"
            class="pan-share-list-card-operate-content"
          >
            <div class="pan-share-list-card-operate-bread-crumb">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item
                  v-for="(item, index) in breadCrumbs"
                  :key="index"
                >
                  <a
                    class="breadcrumb-item-a"
                    @click="goToThis(item.id)"
                    href="#"
                    >{{ item.name }}</a
                  >
                </el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <el-divider></el-divider>
          </div>
          <div v-if="!shareCancelFlag" class="pan-share-list">
            <el-table
              ref="fileTable"
              :data="tableData"
              :height="tableHeight"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              @cell-mouse-enter="showOperation"
              @cell-mouse-leave="hiddenOperation"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                label="文件名"
                prop="filename"
                sortable
                show-overflow-tooltip
                min-width="400"
              >
                <template slot-scope="scope">
                  <div
                    @click="clickFilename(scope.row)"
                    class="file-name-content"
                  >
                    <i
                      :class="getFileFontElement(scope.row.fileType)"
                      style="margin-right: 15px; font-size: 20px; cursor: pointer;"
                    />
                    <span style="cursor:pointer;">{{
                      scope.row.filename
                    }}</span>
                  </div>
                  <div class="file-operation-content">
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="保存到我的R盘"
                      placement="top"
                    >
                      <el-button
                        type="success"
                        icon="el-icon-document-copy"
                        size="small"
                        circle
                        @click="saveFiles(scope.row)"
                      />
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="light"
                      content="下载"
                      placement="top"
                    >
                      <el-button
                        type="info"
                        icon="el-icon-download"
                        size="small"
                        circle
                        @click="doDownload(scope.row)"
                      />
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="fileSizeDesc"
                sortable
                label="大小"
                min-width="120"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="updateTime"
                sortable
                align="center"
                label="修改日期"
                min-width="220"
              >
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog
      title="欢迎登录"
      :visible.sync="loginDialogVisible"
      @opened="focusInput('username')"
      @closed="resetForm('loginForm')"
      width="30%"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div>
        <el-form
          label-width="100px"
          :rules="loginRules"
          ref="loginForm"
          :model="loginForm"
          status-icon
          @submit.native.prevent
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              type="text"
              ref="username"
              @keyup.enter.native="doLogin"
              v-model="loginForm.username"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              show-password
              @keyup.enter.native="doLogin"
              v-model="loginForm.password"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doLogin" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="shareCodeDialogVisible"
      @opened="focusInput('shareCode')"
      @closed="resetForm('shareCodeForm')"
      width="30%"
      :fullscreen="true"
      :append-to-body="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="pan-share-code-content">
        <div class="pan-share-code-wrapper">
          <el-card
            :header="shareCodeHeader"
            shadow="always"
            class="pan-share-code-card"
          >
            <el-form
              class="pan-share-code-form"
              label-width="100px"
              :inline="true"
              :rules="shareCodeFormRules"
              ref="shareCodeForm"
              :model="shareCodeForm"
              status-icon
              @submit.native.prevent
            >
              <el-form-item label="提取码" prop="shareCode">
                <el-input
                  type="text"
                  ref="shareCode"
                  @keyup.enter.native="doCheckShareCode"
                  v-model="shareCodeForm.shareCode"
                  autocomplete="off"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  :loading="loading"
                  @click="doCheckShareCode"
                  >确 定</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="保存到我的R盘"
      :visible.sync="treeDialogVisible"
      @open="loadTreeData"
      @closed="resetTreeData"
      width="30%"
      :append-to-body="true"
      :modal-append-to-body="false"
      :center="true"
    >
      <div class="tree-content">
        <el-tree
          :data="treeData"
          class="tree"
          empty-text="暂无文件夹数据"
          default-expand-all
          highlight-current
          check-on-click-node
          :expand-on-click-node="false"
          ref="tree"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i
              class="fa fa-folder-o"
              style="margin-right: 15px; font-size: 20px; cursor: pointer;"
            />
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="treeDialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="doChoseTreeNodeCallBack"
          :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import panUtil from "../../utils/common";
import userService from "../../api/user";
import fileService from "../../api/file";
import {
  clearToken,
  setToken,
  setShareToken,
  getShareToken,
  getToken,
  clearShareToken,
} from "../../utils/cookie";
import shareService from "../../api/share";

export default {
  name: "Share",
  components: {},
  props: {},
  data() {
    const checkUsername = (rule, value, callback) => {
        if (!panUtil.checkUsername(value)) {
          callback("请输入4-16位的用户名");
          return;
        }
        callback();
      },
      checkPassword = (rule, value, callback) => {
        if (!panUtil.checkPassword(value)) {
          callback("请输入6-16位的密码");
          return;
        }
        callback();
      };
    return {
      loginDialogVisible: false,
      loginRules: {
        username: [{ validator: checkUsername, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
      },
      shareCodeFormRules: {
        shareCode: [
          { required: true, message: "请输入提取码", trigger: "blur" },
        ],
      },
      loginForm: {
        username: "",
        password: "",
      },
      loading: false,
      username: "",
      loginFlag: false,
      shareCodeDialogVisible: false,
      shareCodeForm: {
        shareCode: "",
      },
      shareCodeHeader: "",
      shareCancelFlag: false,
      tableData: [],
      tableHeight: window.innerHeight - 300,
      multipleSelection: [],
      pageLoading: true,
      shareDate: "",
      shareExpireDate: "",
      breadCrumbs: [
        {
          id: "-1",
          name: "全部文件",
        },
      ],
      treeData: [],
      treeDialogVisible: false,
      item: undefined,
    };
  },
  methods: {
    loadShareInfo() {
      let _this = this;
      shareService.getShareDetail((res) => {
        if (res.status === 0) {
          _this.refreshShareInfo(res.data);
        } else if (res.status === 4) {
          _this.openShareCodePage();
        } else {
          _this.openShareExpirePage();
        }
      });
    },
    refreshShareInfo(data) {
      let username = data.shareUserInfoVO.username,
        shareName = data.shareName;
      this.shareCodeHeader = username + "的分享：" + shareName;
      this.shareDate = data.createTime;
      if (data.shareDay === 0) {
        this.shareExpireDate = "永久有效";
      } else {
        this.shareExpireDate = data.shareEndTime;
      }
      this.tableData = data.userFileVOList;
    },
    openShareCodePage() {
      let _this = this;
      shareService.getSimpleShareDetail(
        {
          shareId: _this.getShareId(),
        },
        (res) => {
          if (res.status === 0) {
            this.shareCodeDialogVisible = true;
            _this.shareCodeHeader =
              res.data.shareUserInfoVO.username +
              "的分享：" +
              res.data.shareName;
          } else {
            _this.shareCodeDialogVisible = false;
            _this.openShareExpirePage();
          }
        }
      );
    },
    openShareExpirePage() {
      this.shareCancelFlag = true;
    },
    loadUserInfo() {
      let _this = this;
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          _this.username = res.data.username;
          _this.loginFlag = true;
        } else {
          _this.username = "";
          _this.loginFlag = false;
        }
      });
    },
    login() {
      this.loginDialogVisible = true;
    },
    exit() {
      let _this = this;
      _this
        .$confirm("确定要退出登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          userService.exit(
            () => {
              clearToken();
              _this.loginFlag = false;
              _this.username = "";
            },
            (res) => {
              _this.$message.error(res.message);
            }
          );
        });
    },
    focusInput(ref) {
      this.$refs[ref].focus();
    },
    resetForm(ref) {
      this.$refs[ref].resetFields();
    },
    doLogin() {
      let _this = this;
      _this.$refs.loginForm.validate((valid) => {
        if (valid) {
          _this.loading = true;
          userService.login(
            {
              username: _this.loginForm.username,
              password: _this.loginForm.password,
            },
            (res) => {
              _this.loading = false;
              setToken(res.data);
              _this.loginDialogVisible = false;
              _this.loadUserInfo();
            },
            (res) => {
              _this.loading = false;
              _this.$message.error(res.message);
            }
          );
        }
      });
    },
    goHome() {
      window.location.href = "/";
    },
    doCheckShareCode() {
      let _this = this;
      _this.$refs.shareCodeForm.validate((valid) => {
        if (valid) {
          _this.loading = true;
          shareService.checkShareCode(
            {
              shareId: _this.getShareId(),
              shareCode: _this.shareCodeForm.shareCode,
            },
            (res) => {
              if (res.status === 0) {
                _this.loading = false;
                setShareToken(res.data);
                _this.shareCodeDialogVisible = false;
                _this.loadShareInfo();
              } else {
                _this.loading = false;
                _this.$message.error(res.message);
              }
            }
          );
        }
      });
    },
    handleSelectionChange(multipleSelection) {
      this.multipleSelection = multipleSelection;
    },
    showOperation(row, column, cell, event) {
      panUtil.showOperation(cell);
    },
    hiddenOperation(row, column, cell, event) {
      panUtil.hiddenOperation(cell);
    },
    clickFilename(row) {
      let _this = this;
      if (row.folderFlag === 1) {
        _this.goInFolder(row);
      }
    },
    goInFolder(row) {
      this.breadCrumbs.push({
        id: row.fileId,
        name: row.filename,
      });
      this.reloadTableData(row.fileId);
    },
    reloadTableData(parentId) {
      let _this = this;
      shareService.getShareFiles(
        {
          parentId: parentId,
        },
        (res) => {
          if (res.status === 0) {
            _this.tableData = res.data;
          } else {
            window.location.reload();
          }
        }
      );
    },
    goToThis(id) {
      let _this = this;
      if (id === "-1") {
        _this.breadCrumbs = [
          {
            id: "-1",
            name: "全部文件",
          },
        ];
        _this.loadShareInfo();
      } else {
        let newBreadCrumbs = new Array();
        _this.breadCrumbs.some((item) => {
          newBreadCrumbs.push(item);
          if (item.id === id) {
            return true;
          }
        });
        _this.breadCrumbs = newBreadCrumbs;
        _this.reloadTableData(id);
      }
    },
    getShareId() {
      return this.$route.params.shareId;
    },
    downloadFile() {
      let _this = this;
      if (!_this.multipleSelection || _this.multipleSelection.length === 0) {
        _this.$message.error("请选择要下载的文件");
        return;
      }
      for (
        let i = 0, iLength = _this.multipleSelection.length;
        i < iLength;
        i++
      ) {
        if (_this.multipleSelection[i].folderFlag === 1) {
          _this.$message.error("文件夹暂不支持下载");
          return;
        }
      }
      _this.doDownLoads(_this.multipleSelection);
    },
    doDownLoads(items, i) {
      let _this = this;
      if (!i) {
        i = 0;
      }
      if (items.length === i) {
        return;
      }
      setTimeout(function() {
        _this.doDownload(items[i]);
        i++;
        _this.doDownLoads(items, i);
      }, 500);
    },
    doDownload(item) {
      let _this = this;
      if (item.folderFlag === 1) {
        _this.$message.error("文件夹暂不支持下载");
        return;
      }
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          shareService.getSimpleShareDetail(
            {
              shareId: _this.getShareId(),
            },
            (res) => {
              if (res.status === 0) {
                let url =
                    panUtil.getUrlPrefix() +
                    "/file/share/file/download?fileId=" +
                    item.fileId +
                    "&shareToken=" +
                    getShareToken() +
                    "&authorization=" +
                    getToken(),
                  filename = item.filename,
                  link = document.createElement("a");
                link.style.display = "none";
                link.href = url;
                link.setAttribute("download", filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
              } else {
                window.location.reload();
              }
            }
          );
        } else {
          _this.loadUserInfo();
          _this.login();
        }
      });
    },
    resetTreeData() {
      this.treeData = new Array();
      this.item = undefined;
    },
    loadTreeData() {
      let _this = this;
      fileService.getFolderTree(
        (res) => {
          _this.treeData = res.data;
        },
        (res) => {
          _this.$message.error(res.message);
        }
      );
    },
    doChoseTreeNodeCallBack() {
      this.loading = true;
      let checkNode = this.$refs.tree.getCurrentNode();
      if (!checkNode) {
        this.$message.error("请选择文件夹");
        this.loading = false;
        return;
      }
      this.doSaveFiles(checkNode.id);
    },
    saveFiles(item) {
      let _this = this;
      if (item) {
        _this.item = item;
      } else if (
        !_this.multipleSelection ||
        _this.multipleSelection.length === 0
      ) {
        _this.$message.error("请选择要保存的文件");
        return;
      }
      userService.infoWithoutPageJump((res) => {
        if (res.status === 0) {
          _this.treeDialogVisible = true;
        } else {
          _this.login();
        }
      });
    },
    doSaveFiles(targetParentId) {
      let _this = this;
      let fileIds = "";
      if (_this.item) {
        fileIds = _this.item.fileId;
      } else {
        let fileIdArr = new Array();
        _this.multipleSelection.forEach((item) => {
          fileIdArr.push(item.fileId);
        });
        fileIds = fileIdArr.join("__,__");
      }
      shareService.saveShareFiles(
        {
          fileIds: fileIds,
          targetParentId: targetParentId,
        },
        (res) => {
          if (res.status === 0) {
            _this.$message.success("保存成功");
            _this.treeDialogVisible = false;
          } else if (res.status === 10) {
            _this.treeDialogVisible = false;
            _this.loadUserInfo();
            _this.login();
          } else {
            _this.$message.error(res.message);
          }
          _this.loading = false;
        }
      );
    },
    getFileFontElement(type) {
      panUtil.getFileFontElement(type);
    },
  },
  computed: {},
  mounted() {
    clearShareToken();
    this.loadShareInfo();
    this.loadUserInfo();
    this.pageLoading = false;
  },
  watch: {},
};
</script>

<style>
.pan-share-content {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 1103px;
  background: #f7f7f7;
  transition: background 1s ease;
  font: 12px/1.5 "Microsoft YaHei", arial, SimSun, "宋体";
  width: 100%;
  height: 100%;
}

.pan-share-content .pan-share-header-content {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 41;
  position: fixed;
}

.pan-share-content .pan-share-header-content .pan-share-header-content-wrapper {
  height: 62px;
  line-height: 62px;
  position: relative;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: background 1s ease;
  -moz-transition: background 1s ease;
  -o-transition: background 1s ease;
  transition: background 1s ease;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-title-font-content {
  display: inline-block;
  position: absolute;
  left: 40px;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-title-font-content
  .pan-share-header-title-font {
  font-size: 40px;
  font-weight: bolder;
  cursor: pointer;
  color: #f56c6c;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-user-info-content {
  display: inline-block;
  position: absolute;
  right: 100px;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-user-info-content
  .pan-share-username {
  margin-right: 20px;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-button-content {
  display: inline-block;
  position: absolute;
  right: 100px;
}

.pan-share-content
  .pan-share-header-content
  .pan-share-header-content-wrapper
  .pan-share-header-button-content
  .pan-share-login-button {
  margin-right: 20px;
}

.pan-share-code-content {
  width: 100%;
  height: 300px;
}

.pan-share-code-content .pan-share-code-wrapper {
  height: 300px;
  width: 450px;
  margin: 0 auto;
  position: relative;
  top: 50%;
}

.pan-share-code-content .pan-share-code-wrapper .pan-share-code-card {
  width: 100%;
  height: 100%;
  border-radius: 30px;
}

.pan-share-code-content
  .pan-share-code-wrapper
  .pan-share-code-card
  .pan-share-code-form {
  position: absolute;
  top: 40%;
}

.pan-share-content .pan-share-list-content {
  width: 100%;
  margin-top: 82px;
}

.pan-share-content .pan-share-list-content .pan-share-list-wrapper {
  width: 80%;
  margin: 0 auto;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card {
  width: 100%;
  border-radius: 30px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header {
  padding: 10px 20px 0 0;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-button-group {
  display: inline-block;
  float: right;
  margin-right: 20px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-header-share-info-content {
  display: inline-block;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-header-share-info-content
  .pan-share-list-card-header-share-info {
  color: #67c23a;
  font-size: 18px;
  margin-right: 10px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-header-share-info-content
  .pan-share-list-card-header-time {
  margin-top: 10px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-header-share-info-content
  .pan-share-list-card-header-time
  .pan-share-list-card-header-create-date {
  color: #909399;
  margin-right: 15px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-header
  .pan-share-list-card-header-share-info-content
  .pan-share-list-card-header-time
  .pan-share-list-card-header-expire-date {
  color: #f56c6c;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-error-message {
  width: 100%;
  height: 300px;
  padding-top: 50px;
  text-align: center;
  color: #f56c6c;
  font-size: 30px;
}

.pan-share-content
  .pan-share-list-content
  .pan-share-list-wrapper
  .pan-share-list-card
  .pan-share-list-card-operate-content {
  height: 30px;
  line-height: 30px;
  padding: 0 30px 0 0;
}

span {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.breadcrumb-item-a {
  cursor: pointer !important;
  color: #409eff !important;
}

.tree-content {
  height: 400px;
}

.tree-content .tree {
  height: 100%;
  overflow: auto;
}

.file-operation-content {
  display: none;
  position: absolute;
  right: 100px;
  top: 8px;
}
</style>
